<template>
  <div>
    <Search></Search>
    <GoodsListNav></GoodsListNav>
    <div class="container">
      <div class="bread-crumb">
        <Breadcrumb>
          <BreadcrumbItem to="/">
            <Icon type="ios-home-outline"></Icon> 首页
          </BreadcrumbItem>
          <BreadcrumbItem to="/goodsList?sreachData=">
            <Icon type="bag"></Icon> {{searchItem}}
          </BreadcrumbItem>
        </Breadcrumb>
      </div>
      <!-- 商品标签导航 -->
      <GoodsClassNav></GoodsClassNav>
      <!-- 商品展示容器 -->
      <div class="goods-box">
<!--        <div class="as-box">-->
<!--          <div class="item-as-title">-->
<!--            <span>商品精选</span>-->
<!--            <span>广告</span>-->
<!--          </div>-->
<!--          <div class="item-as" v-for="(item,index) in asItems" :key="index">-->
<!--            <div class="item-as-img">-->
<!--              <img :src="item.img" alt="">-->
<!--            </div>-->
<!--            <div class="item-as-price">-->
<!--              <span>-->
<!--                <Icon type="social-yen text-danger"></Icon>-->
<!--                <span class="seckill-price text-danger">{{item.price}}</span>-->
<!--              </span>-->
<!--            </div>-->
<!--            <div class="item-as-intro">-->
<!--              <span>{{item.intro}}</span>-->
<!--            </div>-->
<!--            <div class="item-as-selled">-->
<!--              已有<span>{{item.num}}</span>人评价-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="goods-list-box">
          <div class="goods-list-tool">
            <ul>
              <li v-for="(item,index) in goodsTool" :key="index" @click="orderBy(item.en, index)"><span :class="{ 'goods-list-tool-active': isAction[index]}">{{item.title}} <Icon :type="icon[index]"></Icon></span></li>
            </ul>
          </div>
          <div class="goods-list">
            <div class="goods-show-info" v-for="(item, index) in products" :key="index">

              <div class="goods-show-img" @click="showProductDetail(item.id)">
                <img :src="item.picUrl" class="image"/>
              </div>
              <div class="goods-show-price">
                <span>
                  <Icon type="social-yen text-danger"></Icon>
                  <span class="seckill-price text-danger">{{item.price}}</span>
                </span>
              </div>
              <div class="goods-show-productName">
                <span>{{item.productName}}</span>
              </div>
              <div class="goods-show-supplierName">
                <span>{{item.supplierName}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-page">
<!--        <Page :total="100" show-sizer></Page>-->
        <el-button-group class="page">
          <el-button type="primary" @click="firstPage">首页</el-button>
          <el-button type="primary" icon="el-icon-arrow-left" @click="prePage">上一页</el-button>
          <el-button type="primary" disabled>第{{this.pages.pageNum}}页</el-button>
          <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
      </div>
    </div>
    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
import Search from '@/components/Search';
import GoodsListNav from '@/components/nav/GoodsListNav';
import GoodsClassNav from '@/components/nav/GoodsClassNav';
import store from '@/vuex/store';
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
import {allProductInfo} from '../api/category';
export default {
  name: 'GoodsList',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 12,
      searchItem: '',
      isAction: [ true, false, false ],
      icon: [ 'arrow-up-a', 'arrow-down-a', 'arrow-down-a' ],
      goodsTool: [
        {title: '综合', en: 'sale'},
        {title: '评论数', en: 'remarks'},
        {title: '价格', en: 'price'}
      ],
      categoryId: this.$route.query.categoryId,
      products: [],
      account: this.$route.query.account,
      dataCount: 0,
      pages: {
        categoryId: 0,
        pageNum: 1,
        pageSize: 8
      }
    };
  },
  computed: {
    ...mapState(['asItems', 'isLoading']),
    ...mapGetters(['orderGoodsList'])

  },
  methods: {
    ...mapActions(['loadGoodsList']),
    ...mapMutations(['SET_GOODS_ORDER_BY']),
    // 初始化数据
    init (url, config) {
      // <<<<<<< HEAD
      //       console.log(this.categoryId);
      //       let ProductInfo = {
      //         categoryId: this.categoryId,
      //         pageNum: this.pageNum,
      //         pageSize: this.pageSize
      //       };
      //       allProductInfo(ProductInfo).then(res => {
      //         // 获取商品信息
      //         this.products = res.data.data;
      //         console.log(this.products);
      //       });
      // =======
      this.pages.categoryId = this.categoryId;
      this.showPage();
      // allProductInfo()
    },
    // 显示当前页信息
    showPage () {
      console.log(this.pages);
      allProductInfo(this.pages).then((res) => {
        if (res.data.code === '00000') {
          console.log(res.data);
          // 处理类型
          // product获取数据
          console.log(res.data.code);
          this.products = res.data.data;
          console.log(this.products);
          this.dataCount = this.products.length;
          if (this.dataCount === 0 && this.pages.pageNum !== 1) {
            // 超出尾页了
            this.pages.pageNum = this.pages.pageNum - 1;
            this.showPage();
            this.$Message.error('现在已经是尾页了哦~');
          }
        } else {
          this.$Message.error(res.data.code);
        }
      });
    },
    // 下一页
    nextPage () {
      this.pages.pageNum = this.pages.pageNum + 1;
      this.showPage();
    },
    // 上一页
    prePage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = this.pages.pageNum - 1;
        this.showPage();
      }
    },
    // 首页
    firstPage () {
      if (this.pages.pageNum === 1) {
        this.$Message.error('现在已经是首页了哦~');
      } else {
        this.pages.pageNum = 1;
        this.showPage();
      }
    },
    // 点击每个商品类别会跳转到相应的页面

    getProductByClass (id) {
      // 跳转到商品管理界面
      this.$router.push({
        path: '/goodsList',
        query: {categoryId: id}
      });
      console.log(id);
      allProductInfo(id).then(res => {
        // console.log(id);
        this.$Message.success(id);
      });
    },
    showProductDetail (id) {
      this.$Message.success(id);
      // 跳转到商品详情界面
      this.$router.push({
        path: '/goodsDetail',
        query: {productId: id}
      });
    },
    orderBy (data, index) {
      // console.log(data);
      this.icon = [ 'arrow-down-a', 'arrow-down-a', 'arrow-down-a' ];
      this.isAction = [ false, false, false ];
      this.isAction[index] = true;
      this.icon[index] = 'arrow-up-a';
      this.SET_GOODS_ORDER_BY(data);
    }
  },
  created () {
    this.loadGoodsList();
  },
  // 生命周期钩子函数，初始化数据
  mounted () {
    console.log('你在这里吗');
    this.init();
  },
  components: {
    Search,
    GoodsListNav,
    GoodsClassNav
  },
  store
};
</script>

<style scoped>
.container {
  margin: 15px auto;
  width: 93%;
  min-width: 1000px;
}
.text-danger {
  color: #A94442;
}
.seckill-price{
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
.goods-box {
  display: flex;
}
/* ---------------侧边广告栏开始------------------- */
.as-box {
  width: 200px;
  border: 1px solid #ccc;
}
.item-as-title{
  width: 100%;
  height: 36px;
  color: #B1191A;
  line-height: 36px;
  font-size: 18px;
}
.item-as-title span:first-child{
  margin-left: 20px;
}
.item-as-title span:last-child{
  float: right;
  margin-right: 15px;
  font-size: 10px;
  color: #ccc;
}
.item-as{
  width: 160px;
  margin: 18px auto;
}
.item-as-img{
  width: 160px;
  height: 160px;
  margin: 0px auto;
}
.image{
  width: 180px;
  height: 180px;
  margin: 10px auto;
  display: table-cell;
  text-align: center;
}
.item-as-price span{
  font-size: 18px;
}
.item-as-intro{
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled{
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled span{
  color: #005AA0;
}
/* ---------------侧边广告栏结束------------------- */

/* ---------------商品栏开始------------------- */
.goods-list-box {
  margin-left: 15px;
  width: calc(100% - 100px);
}
.goods-list-tool{
  width: 100%;
  height: 38px;
  border: 1px solid #ccc;
  background-color: #F1F1F1;
}
.goods-list-tool ul{
  padding-left: 15px;
  list-style: none;
}
.goods-list-tool li{
  cursor: pointer;
  float: left;
}
.goods-list-tool span{
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 36px;
  background-color: #fff;
}
.goods-list-tool span:hover{
  border: 1px solid #E4393C;
}
.goods-list-tool i:hover{
  color: #E4393C;
}
.goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: #E4393C !important;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: initial;
}
.goods-show-info{
  width: 280px;
  padding: 10px;
  margin: 25px 15px;
  border: 1px solid #fff;
  cursor: pointer;
}
.goods-show-info:hover{
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}
.goods-show-price{
  margin-top: 6px;
}
.goods-show-productName{
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-num{
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}
.goods-show-num span{
  color: #005AA0;
  font-weight: bold;
}
.goods-show-supplierName{
  font-size: 12px;
  color:#E4393C;
}
.goods-page {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* ---------------商品栏结束------------------- */
</style>
